<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul{margin: 0;padding: 0;list-style: none;}
.box{width: 480px;border:1px solid #000; ;margin: 40px auto;text-align: center;padding: 6px;}
img{width: 300px; height: 400px; border:none; vertical-align: top;float: left;}
ul{width: 90px;height: 400px;}
ul li {height: 80px; line-height: 80px;clear: both;font-weight: bold;}
#left{float: left;}
#right{float: right;}
.clear{zoom: 1;}
.clear:after{content:'';display: block;clear: both;}
</style>
<script type="text/javascript">
window.onload = function () {
	var oLeft = document.getElementById('left');
	var aLi = document.getElementsByTagName('li');
	var oImg = document.getElementsByTagName('img')[0];
	var len = aLi.length;
	var arr = ['1-1.jpg','1-2.jpg','1-3.jpg','2-1.jpg','2-2.jpg','2-3.jpg','2-4.jpg','3-1.jpg','3-2.jpg','3-3.jpg'];
	var num = 0;
	var timer = null;

	//初始化
	aLi[num].style.backgroundColor = 'pink';

	function autoPlay(){
		timer = setInterval(function (){
			for (var i = 0; i < aLi.length; i++) {
				aLi[i].style.background = 'none';
			};

			if ( num < Math.floor(len/2) ) {		//0~4
				num ++; 							//1234
				if (num == Math.floor(len/2)) {		//5
					num = len - 1;					//9
				};
			}else{  								//9~5
				num --;								//87654
				if (num == Math.floor(len/2)-1 ){	//4
					num = 0;
				};
			}
			aLi[num].style.backgroundColor = 'pink';
			oImg.src = arr[num];
		},500);
	};
	autoPlay();

	for (var i = 0; i < aLi.length; i++) {
		aLi[i].onmouseover = function (){
			clearInterval(timer);
			for (var i = 0; i < aLi.length; i++) {
				aLi[i].style.background = 'none';
			};
			this.style.backgroundColor = 'pink';
		}

		aLi[i].onmouseout = function (){
			clearInterval(timer);
			autoPlay();
		}
	};

}
</script>
</head>
<body>
	<div class="box clear">
		<ul id="left">
			<li>物品1</li>
			<li>物品2</li>
			<li>物品3</li>
			<li>物品4</li>
			<li>物品5</li>
		</ul>
		<img src="1-1.jpg">
		<ul id="right">
			<li>物品6</li>
			<li>物品7</li>
			<li>物品8</li>
			<li>物品9</li>
			<li>物品10</li>
		</ul>
	</div>
</body>
</html>